<template>
  <a-dropdown placement="bottomRight" :disabled="isAllNoPermission">
    <!-- <a class="ant-dropdown-link inline-block whitespace-nowrap" @click.prevent>
      {{ t("common.more") }}
      <Icon :type="record.operVisible ? 'icon-shang' : 'icon-xia'" />
    </a> -->
    <PermissionBtn :has-permission="!isAllNoPermission" :btn-props="{ type: 'link' }">
      {{ t("common.more") }}
      <Icon :type="record.operVisible ? 'icon-shang' : 'icon-xia'" class="!ml-1" />
    </PermissionBtn>
    <!-- <a-button type="link" class="permission-btn" :disabled="isAllNoPermission" @click.prevent>
      {{ t("common.more") }}
      <Icon :type="record.operVisible ? 'icon-shang' : 'icon-xia'" class="!ml-1" />
    </a-button> -->
    <template #overlay>
      <a-menu class="w-32">
        <a-menu-item
          v-for="(el, i) in innerData"
          :key="i"
          :disabled="
            !el.hasPermission ||
            el.disabled ||
            !!(typeof el.disabledMes == 'function' ? el.disabledMes(record) : el.disabledMes)
          "
          @click="handler(record, el)"
        >
          <PermissionBtn
            :btn-props="{
              type: 'link',
              danger: typeof el.danger == 'function' ? el.danger(record) : el.danger,
              disabled: el.disabled,
            }"
            :disabled-mes="typeof el.disabledMes == 'function' ? el.disabledMes(record) : el.disabledMes"
            :has-permission="el.hasPermission"
          >
            <slot v-if="el.customSlot" :name="el.customSlot" />
            <span v-else>{{ typeof el.label == "function" ? el.label(record) : el.label }}</span>
          </PermissionBtn>
          <!-- <a href="javascript:void(0)">
            
          </a> -->
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script lang="ts">
import { computed, defineComponent, PropType, ref, watch } from "vue";
import { Menu, Dropdown } from "ant-design-vue";
import { useI18n } from "/@/locales/useI18n";
import Icon from "/@/components/Icon.vue";
import type { OperItem } from "/@/components/CURDDialog/models";
import { usePermission } from "/@/hooks/usePermission";
import PermissionBtn from "/@/components/PermissionBtn.vue";

export default defineComponent({
  components: {
    Icon,
    AMenu: Menu,
    AMenuItem: Menu.Item,
    ADropdown: Dropdown,
    PermissionBtn,
  },
  props: {
    data: {
      required: true,
      type: Array as PropType<OperItem[]>,
    },
    record: {
      required: true,
      type: Object,
    },
  },
  setup(props) {
    const { t } = useI18n();
    function handler(record, item) {
      record.operVisible = false;
      item.handler(record);
    }
    const { judgePermissionByCode, judgePermissionByOperType } = usePermission();
    const isAllNoPermission = ref(false);
    const innerData = ref<OperItem[]>([]);
    watch(
      () => props.data,
      (data) => {
        isAllNoPermission.value = true;
        innerData.value = data.filter((el) => {
          if (el.showInTable === false) return false;
          let label = el.label;
          if (typeof label == "function") {
            label = label(props.record);
          }
          if (label) {
            if (el.permissionCode) {
              el.hasPermission = judgePermissionByCode(el.permissionCode);
            } else if (el.operType) {
              el.hasPermission = judgePermissionByOperType(el.operType);
            } else {
              el.hasPermission = true;
            }
            if (el.hasPermission) {
              isAllNoPermission.value = false;
            }
          }
          return !!label;
        });
      },
      {
        immediate: true,
      }
    );
    // const innerData = computed(() =>
    //   props.data.filter((el) => {
    //     if (el.showInTable === false) return false;
    //     if (el.permissionCode) {
    //       el.hasPermission = judgePermissionByCode(el.permissionCode);
    //     } else if (el.operType) {
    //       el.hasPermission = judgePermissionByOperType(el.operType);
    //     } else {
    //       el.hasPermission = true;
    //     }
    //     let label = el.label;
    //     if (typeof label == "function") {
    //       label = label(props.record);
    //     }
    //     return !!label;
    //   })
    // );
    return {
      t,
      handler,
      innerData,
      isAllNoPermission,
    };
  },
});
</script>
